import { SplitScreen6, SplitScreen7, SplitScreen8 } from '@/components/Icons';
import { closeRecordIcon, recordIcon } from '@/components/Icons/svg';
import ChairMeeting from '@/pages/VideoMeeting/chairMeeting';
import Chat from '@/pages/VideoMeeting/chat';
import {
  getInitiationUserList,
  getSelfGrowthId,
  meetingDetail,
  updateVideoMeetingStatus,
} from '@/services/MeetingService';
import { useSearchParams } from '@@/exports';
import Icon, {
  ArrowUpOutlined,
  AudioMutedOutlined,
  AudioOutlined,
  BorderOutlined,
  CloseOutlined,
  DownOutlined,
  ExpandOutlined,
  MessageOutlined,
  MinusOutlined,
  UsergroupAddOutlined,
  VideoCameraAddOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { CheckCard, ModalForm } from '@ant-design/pro-components';
import { useAsyncEffect, useGetState } from 'ahooks';
import {
  Button,
  Col,
  Dropdown,
  Form,
  MenuProps,
  Modal,
  Row,
  Space,
  Transfer,
  message,
} from 'antd';
import { TransferDirection } from 'antd/lib/transfer';
import { useEffect, useRef, useState } from 'react';
import { useModel } from 'umi';
import styles from './index.less';

export default () => {
  const [token, setToken] = useState<string>();
  const { peerServer, srsServer } = useModel('global');
  const [
    meetingReceivedMessage,
    setMeetingReceivedMessage,
    getMeetingReceivedMessage,
  ] = useGetState<{
    messageType?: string;
    app?: string;
    stream?: string;
  }>();
  const [appAndStreamMessage, setAppAndStreamMessage] = useState<{
    messageType?: string;
    app?: string;
    stream?: string;
  }>();
  const [searchParams] = useSearchParams();
  const { initialState } = useModel('@@initialState');
  //本地流
  const [localStream, setLocalStream, getLocalStream] = useGetState<
    MediaStream | undefined
  >();
  const [
    localRtcPeerConnection,
    setLocalRtcPeerConnection,
    getLocalRtcPeerConnection,
  ] = useGetState<RTCPeerConnection | undefined>();
  //本地共享流
  const [localShareStream, setLocalShareStream, getLocalShareStream] =
    useGetState<MediaStream | undefined>();
  const [localShareRtcPeerConnection, setLocalShareRtcPeerConnection] =
    useState<RTCPeerConnection | undefined>();
  //远端流
  const [remoteStream, setRemoteStream] = useState<MediaStream[] | undefined>();
  const [remoteRtcPeerConnections, setRemoteRtcPeerConnections] = useState<
    RTCPeerConnection[] | undefined
  >();
  const localVideoRef = useRef<HTMLVideoElement>(null);
  const localVideoThumbnailRef = useRef<HTMLVideoElement>(null);
  //远端主持人
  const rangeVideoRef = useRef<HTMLVideoElement>(null);
  const rangeEmceeVideoThumbnailRef = useRef<HTMLVideoElement>(null);
  //远端参会人
  //const rangeVideoThumbnailRef = useRef<HTMLVideoElement>(null);
  const rangeVideoThumbnailRef = useRef<{ refs: HTMLVideoElement[] }>({
    refs: [],
  });
  const videoRef = useRef<HTMLVideoElement>(null);
  //音量开关
  const [volumeFlag, setVolumeFlag, getVolumeFlag] = useGetState<boolean>(true);
  //摄像头开关
  const [cameraFlag, setCameraFlag, getCameraFlag] =
    useGetState<boolean>(false);
  const [volumeList, setVolumeList] = useState<MenuProps['items']>();
  const [cameraList, setCameraList] = useState<MenuProps['items']>();

  const [form] = Form.useForm<{ name: string; company: string }>();
  const [inviteUserForm] = Form.useForm<{ name: string; company: string }>();
  //屏幕列表
  const [desktopSources, setDesktopSources] = useState<
    | [
        {
          imageUrl: string;
          name: string;
          displayId: string;
        },
      ]
    | undefined
  >([{ imageUrl: '', name: '', displayId: '' }]);
  const [sourceSelected, setSourceSelected] = useState<string>('整个屏幕');
  const [chatFlag, setChatFlag] = useState<boolean>(false);
  const userInfo = JSON.parse(localStorage.getItem('userInfo')!);
  const [chatMessageList, setChatMessageList] = useState<
    [
      {
        userId: number | undefined;
        userName: string | undefined;
        chatMessage: string | undefined;
        createTime: string | undefined;
        avatar: string | undefined;
      },
    ]
  >();
  const [inviteUserListData, setInviteUserListData] = useState<RecordType[]>();
  const [targetKeys, setTargetKeys] = useState<string[]>([]);
  const [viewFlag, setViewFlag] = useState<boolean>(false);
  const [modalPosition, setModalPosition] = useState({ top: 0, left: 0 });
  const [closeModalPosition, setCloseModalPosition] = useState({
    top: 0,
    left: 0,
  });
  const [layoutCheck, setLayoutCheck] = useState<number>(1);
  const [isCollapsed, setIsCollapsed] = useState(true);
  const [divHeight, setDivHeight] = useState('25%');
  const [VideoHeight, setVideoHeight] = useState('75%');
  const [divWidth, setDivWidth] = useState('25%');
  const [videoWidth, setVideoWidth] = useState('75%');
  const [attendedList, setAttendedList, getAttendedList] = useGetState<
    {
      userId: string;
      userName: string;
      avatar: string;
      messageType: string;
      app: string;
      stream: string;
      pullFlag: boolean;
      pushFlag: boolean;
      videoFlag: boolean;
      audioFlag: boolean;
    }[]
  >([]);
  const [myUuid, setMyUuid, getMyUuid] = useGetState<string>('');
  const [myShareUuid, setMyShareUuid, getMyShareUuid] = useGetState<string>('');
  const [closeFlag, setCloseFlag] = useState<boolean>(false);
  const [closeType, setCloseType, getCloseType] = useGetState<string>('');
  const [streamType, setStreamType, getStreamType] = useGetState<string>('');
  const [shareFlag, setShareFlag, getShareFlag] = useGetState<boolean>(false);
  const [recordFlag, setRecordFlag] = useState<boolean>(false);

  interface RecordType {
    key: string;
    title: string;
    imageUrl: string;
  }
  const [meetingCode] = searchParams.getAll('meetingCode');
  const [meetingName] = searchParams.getAll('meetingName');

  useAsyncEffect(async () => {
    let initiationUserList = [];
    initiationUserList.push({
      userId: userInfo.id,
      userName: userInfo.userName,
      avatar: userInfo.avatar,
      messageType: '',
      pullFlag: getStreamType() === 'pullStream',
      pushFlag: getStreamType() === 'pushStream',
      app: getMyUuid() === '' ? '' : 'live-' + getMyUuid(),
      stream: getMyUuid() === '' ? '' : 'livestream-' + getMyUuid(),
      videoFlag: true,
      audioFlag: true,
    });
    //获取所有参会人员信息
    const userList = await getInitiationUserList(peerServer, '', meetingCode);
    if (userList.data.length > 0) {
      initiationUserList = [...initiationUserList, ...userList.data];
    }
    setAttendedList(initiationUserList);
    if (initiationUserList.length > 0) {
      initiationUserList.map(async (initiationUser: any, index: number) => {
        const a = index;
        const videoStream = new MediaStream();
        const peer = new RTCPeerConnection();
        peer.addTransceiver('audio', { direction: 'recvonly' });
        peer.addTransceiver('video', { direction: 'recvonly' });
        //监听连接状态,监听状态必须在设置描述之前
        peer.onconnectionstatechange = () => {
          if (peer.connectionState === 'connected') {
          } else if (
            peer.connectionState === 'disconnected' ||
            peer.connectionState === 'failed'
          ) {
            //replay('WebRTC断开，重置播放器');
          }
        };
        peer.ontrack = (e) => {
          videoStream.addTrack(e.track);
        };
        const rtcSdp = await peer.createOffer();
        await peer.setLocalDescription(rtcSdp);
        let url =
          `${srsServer}-play/?app=` +
          initiationUser!.app +
          `&stream=` +
          initiationUser!.stream;
        if (getShareFlag() && meetingReceivedMessage != undefined) {
          url =
            `${srsServer}-play/?app=` +
            meetingReceivedMessage!.app +
            `&stream=` +
            meetingReceivedMessage!.stream;
        }
        const result = await fetch(url, {
          method: 'POST',
          // mode: 'cors',
          cache: 'no-cache',
          // credentials: 'include',
          redirect: 'follow',
          referrerPolicy: 'no-referrer',
          headers: {
            'Content-Type': 'application/sdp',
          },
          body: rtcSdp.sdp,
        });
        const remoteSdp = await result.text();
        await peer.setRemoteDescription(
          new RTCSessionDescription({ type: 'answer', sdp: remoteSdp }),
        );
        if (initiationUser.pushFlag) {
          if (rangeVideoRef.current != null) {
            rangeVideoRef.current!.srcObject = videoStream;
          }
        }
        if (initiationUser.userId != userInfo.id.toString()) {
          rangeVideoThumbnailRef.current!.refs.forEach((videoRef, index) => {
            if (videoRef && a === index) {
              videoRef.srcObject = videoStream;
            }
          });
        }
      });
    }
    if (getStreamType() === 'pushStream') {
      if (getShareFlag()) {
        await sharedScreen();
      } else {
        //推流
        await pushStream('push');
      }
    } else {
      await pullStream();
    }
  }, [meetingReceivedMessage, layoutCheck]);

  const pushStream = async (type: string) => {
    if (getMyUuid() != '') {
      localVideoRef.current!.srcObject = localStream!;
      return;
    } else {
      const uuid = await getSelfGrowthId(peerServer);
      setMyUuid(uuid.data);
    }
    navigator.mediaDevices
      .enumerateDevices()
      .then(function (devices) {
        // 遍历设备列表并查找摄像头设备
        const videoDevices = devices.filter(
          (device) => device.kind === 'videoinput',
        );
        // 遍历设备列表并查找音频输入设备（麦克风）
        const audioDevices = devices.filter(
          (device) => device.kind === 'audioinput',
        );
        // videoDevices 数组中包含了可用的摄像头设备信息
        console.log('可用摄像头设备：', videoDevices);
        console.log('可用音频输入设备（麦克风）：', audioDevices);
        // 如果至少有一个摄像头设备可用，选择其中一个设备并设置其deviceId
        if (videoDevices.length === 0) {
          console.log('没有可用的摄像头设备');
        }
        if (audioDevices.length === 0) {
          console.log('没有可用的音频输入设备（麦克风）');
        }
        let volumeListInit: any[] = [];
        let cameraListInit: any[] = [];
        videoDevices.map((videoDevice) => {
          const camera = {
            key: videoDevice.deviceId,
            label: videoDevice.label,
          };
          cameraListInit.push(camera);
        });
        setCameraList(cameraListInit);
        audioDevices.map((audioDevice) => {
          const volume = {
            key: audioDevice.deviceId,
            label: audioDevice.label,
          };
          volumeListInit.push(volume);
        });
        setVolumeList(volumeListInit);
        const selectedCamera = videoDevices[0]; // 选择第一个摄像头
        const selectedAudio = audioDevices[0]; // 选择第一个麦克风
        const constraints = {
          video: {
            deviceId: { exact: selectedCamera.deviceId },
            width: { ideal: 1920 },
            height: { ideal: 1080 },
          },
          audio: {
            deviceId: { exact: selectedAudio.deviceId },
          }, // 启用音频
        };
        // 获取本地媒体流
        navigator.mediaDevices
          .getUserMedia(constraints)
          .then((stream) => {
            setLocalStream(stream);
            localVideoRef.current!.srcObject = stream;

            // 创建RTC推流连接
            const peerConnection = new RTCPeerConnection();
            peerConnection.addTransceiver('audio', { direction: 'sendonly' });
            peerConnection.addTransceiver('video', { direction: 'sendonly' });
            // 添加本地流到连接
            stream.getTracks().forEach((track) => {
              //设置固定分辨率，避免出现录频会变化分辨率
              const hint = 'detail';
              if ('contentHint' in track) {
                track.contentHint = hint;
                if (track.contentHint !== hint) {
                  console.error(`Invalid video track contentHint: "${hint}"`);
                }
              }
              peerConnection.addTrack(track);
            });
            // 创建一个Offer并设置本地描述
            peerConnection
              .createOffer()
              .then((offer) => {
                return peerConnection.setLocalDescription(
                  new RTCSessionDescription(offer),
                );
              })
              .then(async () => {
                // 发送本地描述给远程端
                const result = await fetch(
                  `${srsServer}/?app=live-` +
                    getMyUuid() +
                    `&stream=livestream-` +
                    getMyUuid(),
                  {
                    method: 'POST',
                    // mode: 'cors',
                    cache: 'no-cache',
                    // credentials: 'include',
                    redirect: 'follow',
                    referrerPolicy: 'no-referrer',
                    headers: {
                      'Content-Type': 'application/sdp',
                    },
                    body: peerConnection.localDescription?.sdp,
                  },
                );
                const remoteSdp = await result.text();
                await peerConnection.setRemoteDescription(
                  new RTCSessionDescription({
                    type: 'answer',
                    sdp: remoteSdp,
                  }),
                );
                setLocalRtcPeerConnection(peerConnection);
                if (type === 'push') {
                  //告知服务器发起会议
                  const message = {
                    messageType: 'push',
                    userId: userInfo.id,
                    avatar: userInfo.avatar,
                    app: 'live-' + getMyUuid(),
                    stream: 'livestream-' + getMyUuid(),
                    meetingCode: meetingCode,
                  };
                  await sendMessage(message);
                } else if (type === 'stopShare') {
                  //告知服务器发起会议
                  const message = {
                    messageType: 'stopShare',
                    userId: userInfo.id,
                    avatar: userInfo.avatar,
                    app: 'live-' + getMyUuid(),
                    stream: 'livestream-' + getMyUuid(),
                    meetingCode: meetingCode,
                  };
                  await sendMessage(message);
                }
              })
              .catch((error) =>
                console.error('发送本地描述给远程端异常:', error),
              );
          })
          .catch((error) => console.error('getUserMedia异常：', error));
        return true;
      })
      .catch(function (error) {
        console.error('enumerateDevices error:', error);
      });
  };

  const pullStream = async () => {
    //拉流之前的校验
    if (!searchParams.has('meetingCode')) {
      Modal.error({
        centered: true,
        content: '会议不存在',
        okText: '确定',
        onOk: () => {
          window.close();
        },
      });
      return;
    }
    const { data } = await meetingDetail(peerServer, meetingCode);
    if (data === null) {
      //会议室不存在
      Modal.error({
        centered: true,
        content: '会议不存在',
        okText: '确定',
        onOk: () => {
          window.close();
        },
      });
      return;
    } else {
      document.title = document.title.replace('视频会议', data.meetingName);
    }
    if (getMyUuid() != '') {
      if (localVideoRef.current) {
        localVideoRef.current!.srcObject = localStream!;
      }
      return;
    } else {
      const uuid = await getSelfGrowthId(peerServer);
      setMyUuid(uuid.data);
    }
    //拉流
    try {
      //将自己的音视频推送出去
      navigator.mediaDevices
        .enumerateDevices()
        .then(async function (devices) {
          // 遍历设备列表并查找摄像头设备
          const videoDevices = devices.filter(
            (device) => device.kind === 'videoinput',
          );
          // 遍历设备列表并查找音频输入设备（麦克风）
          const audioDevices = devices.filter(
            (device) => device.kind === 'audioinput',
          );
          // videoDevices 数组中包含了可用的摄像头设备信息
          console.log('可用摄像头设备：', videoDevices);
          console.log('可用音频输入设备（麦克风）：', audioDevices);
          // 如果至少有一个摄像头设备可用，选择其中一个设备并设置其deviceId
          if (videoDevices.length === 0) {
            console.log('没有可用的摄像头设备');
          }
          if (audioDevices.length === 0) {
            console.log('没有可用的音频输入设备（麦克风）');
          }
          let volumeListInit: any[] = [];
          let cameraListInit: any[] = [];
          videoDevices.map((videoDevice) => {
            const camera = {
              key: videoDevice.deviceId,
              label: videoDevice.label,
            };
            cameraListInit.push(camera);
          });
          setCameraList(cameraListInit);
          audioDevices.map((audioDevice) => {
            const volume = {
              key: audioDevice.deviceId,
              label: audioDevice.label,
            };
            volumeListInit.push(volume);
          });
          setVolumeList(volumeListInit);
          const selectedCamera = videoDevices[0]; // 选择第一个摄像头
          const selectedAudio = audioDevices[0]; // 选择第一个麦克风
          const constraints = {
            video: {
              deviceId: { exact: selectedCamera.deviceId },
              width: { ideal: 1920 },
              height: { ideal: 1080 },
            },
            audio: {
              deviceId: { exact: selectedAudio.deviceId },
            }, // 启用音频
          };
          // 获取本地媒体流
          navigator.mediaDevices
            .getUserMedia(constraints)
            .then((stream) => {
              setLocalStream(stream);
              // 创建RTC推流连接
              const peerConnection = new RTCPeerConnection();
              peerConnection.addTransceiver('audio', {
                direction: 'sendonly',
              });
              peerConnection.addTransceiver('video', {
                direction: 'sendonly',
              });
              // 添加本地流到连接
              stream.getTracks().forEach((track) => {
                //设置固定分辨率，避免出现录频会变化分辨率
                const hint = 'detail';
                if ('contentHint' in track) {
                  track.contentHint = hint;
                  if (track.contentHint !== hint) {
                    console.error(`Invalid video track contentHint: "${hint}"`);
                  }
                }
                peerConnection.addTrack(track);
              });
              // 创建一个Offer并设置本地描述
              peerConnection
                .createOffer()
                .then((offer) => {
                  return peerConnection.setLocalDescription(
                    new RTCSessionDescription(offer),
                  );
                })
                .then(async () => {
                  // 发送本地描述给远程端
                  const result = await fetch(
                    `${srsServer}/?app=live-` +
                      getMyUuid() +
                      `&stream=livestream-` +
                      getMyUuid(),
                    {
                      method: 'POST',
                      // mode: 'cors',
                      cache: 'no-cache',
                      // credentials: 'include',
                      redirect: 'follow',
                      referrerPolicy: 'no-referrer',
                      headers: {
                        'Content-Type': 'application/sdp',
                      },
                      body: peerConnection.localDescription?.sdp,
                    },
                  );
                  const remoteSdp = await result.text();
                  await peerConnection.setRemoteDescription(
                    new RTCSessionDescription({
                      type: 'answer',
                      sdp: remoteSdp,
                    }),
                  );
                  setLocalRtcPeerConnection(peerConnection);
                  //告知服务器参会人员推送声音/视频
                  const message = {
                    messageType: 'pull',
                    userId: userInfo.id,
                    userName: userInfo.userName,
                    avatar: userInfo.avatar,
                    app: 'live-' + getMyUuid(),
                    stream: 'livestream-' + getMyUuid(),
                    meetingCode: meetingCode,
                  };
                  await sendMessage(message);
                })
                .catch((error) =>
                  console.error('发送本地描述给远程端异常:', error),
                );
            })
            .catch((error) => console.error('getUserMedia异常：', error));
          return true;
        })
        .catch(function (error) {
          console.error('enumerateDevices error:', error);
        });
    } catch (e: any) {
      console.error('------------------------------------拉流异常：', e);
    }
  };
  useEffect(() => {
    const [streamTypeTmp] = searchParams.getAll('streamTypeTmp');
    setStreamType(streamTypeTmp);
    const windowClose = async () => {
      if (getStreamType() === 'pushStream' && getCloseType() === 'endMeeting') {
        localRtcPeerConnection?.close();
        localShareRtcPeerConnection?.close();
        updateVideoMeetingStatus(peerServer, meetingCode);
      }
    };
    window.osn.on('shareVideo', (_: any, result: any) => {
      setMeetingReceivedMessage(result);
      if (result.userId != userInfo.id.toString()) {
        setShareFlag(true);
      }
    });
    window.osn.on('getInviteUser', (_: any, result: any) => {
      initInviteUser(result);
    });
    window.osn.on('pullRemove', (_: any, result: any) => {
      removePull(result);
    });
    window.osn.on('stopShare', (_: any) => {
      stopShare();
    });
    window.osn.on('stopShareReceive', (event: any, result: any) => {
      setMeetingReceivedMessage(result);
      setMeetingReceivedMessage(undefined);
    });
    window.osn.on('closeWindow', (_: any) => {
      closeWindow();
    });
    window.osn.on('changeEmcee', (_: any, result: any) => {
      if (result.pushFlag) {
        message.success('您已被设置成主持人');
        setMeetingReceivedMessage(result);
        setStreamType('pushStream');
      } else {
        message.success(result.userName + '已被设置成主持人');
        setStreamType('pullStream');
      }
    });
    window.osn.on('setToggleEvents', (_: any, result: any) => {
      toggle(result.audioKey, result.videoKey, result.type);
    });
    window.osn.on('setVolumeClickEvents', (_: any, result: boolean) => {
      setVolumeFlag(result);
      volumeClick();
    });
    window.osn.on('setCameraClickEvents', (_: any, result: boolean) => {
      setCameraFlag(result);
      cameraClick();
    });
    window.osn.on('setRecordClickEvents', (_: any, result: boolean) => {
      console.log('meeting=========', result);
      setRecordFlag(result);
      meetingRecord(result);
    });
    window.osn.on('setChatShowEvents', (_: any) => {
      const chatShowId = document.getElementById('chatShowId');
      chatShowId!.click();
    });
    window.osn.on('setInviteUserShowEvents', (_: any) => {
      const inviteUserId = document.getElementById('inviteUserId');
      inviteUserId!.click();
    });
    window.osn.on('changeVolume', (_: any, result: boolean) => {
      setVolumeFlag(result);
      volumeClick();
    });
    window.osn.on('changeVideo', (_: any, result: boolean) => {
      setCameraFlag(result);
      cameraClick();
    });
    window.osn.on('recordNoticeToLeaveMeeting', (_: any) => {
      //录制提示框通知离开会议
      recordMoticeToLeaveMeeting();
    });
    window.osn.on('changeRecord', (_: any, result: boolean) => {
      console.log('收到需要更新的录制状态-----', result);
      //修改录制状态
      setRecordFlag(result);
    });

    // 监听关闭请求
    window.addEventListener('beforeunload', windowClose);
    // 在组件卸载时，清理监听器
    return () => {
      window.removeEventListener('beforeunload', windowClose);
    };
  }, []);

  useEffect(() => {
    if (getStreamType() === 'pushStream') {
      const videoElement = localVideoRef.current;
      if (videoElement && localStream != undefined) {
        localVideoRef.current!.srcObject = localStream!;
        if (layoutCheck != 3) {
          rangeVideoThumbnailRef.current!.refs[0].srcObject = getLocalStream()!;
        }
      }
    } else {
      const videoElement = rangeVideoRef.current;
      if (videoElement && localStream != undefined) {
        if (layoutCheck != 3) {
          rangeVideoThumbnailRef.current!.refs[0].srcObject = getLocalStream()!;
        }
      }
    }
  }, [localVideoRef.current, localStream, rangeVideoRef.current]);

  useEffect(() => {
    if (getStreamType() === 'pushStream') {
      const videoElement = localVideoRef.current;
      if (videoElement && getLocalShareStream() != undefined) {
        localVideoRef.current!.srcObject = localShareStream!;
        if (layoutCheck != 3) {
          rangeVideoThumbnailRef.current!.refs[0].srcObject =
            getLocalShareStream()!;
        }
      } else if (videoElement && localStream != undefined) {
        localVideoRef.current!.srcObject = localStream!;
        if (layoutCheck != 3) {
          rangeVideoThumbnailRef.current!.refs[0].srcObject = getLocalStream()!;
        }
      }
    } else {
      const videoElement = rangeVideoRef.current;
      if (videoElement && getLocalShareStream() != undefined) {
        if (layoutCheck != 3) {
          rangeVideoThumbnailRef.current!.refs[0].srcObject =
            getLocalShareStream()!;
        }
      } else if (videoElement && localStream != undefined) {
        if (layoutCheck != 3) {
          rangeVideoThumbnailRef.current!.refs[0].srcObject = getLocalStream()!;
        }
      }
    }
  }, [localVideoRef.current, getLocalShareStream(), rangeVideoRef.current]);
  useEffect(() => {
    window.osn.on('pullReceive', (event: any, result: any) => {
      pullReceive(result);
    });
  }, [rangeVideoThumbnailRef, attendedList]);

  const sendMessage = async (message: {}) => {
    window.tm!.ipcRenderer.send(
      'send-websocket-message',
      JSON.stringify(message),
    );
  };

  const stopShare = async () => {
    //清理之前的连接和流
    if (localShareRtcPeerConnection) {
      localShareRtcPeerConnection.close();
    }
    if (getLocalShareStream()) {
      // 停止所有轨道
      getLocalShareStream()!
        .getTracks()
        .forEach((track) => track.stop());
      setLocalShareStream(undefined);
    }
    setShareFlag(false);
    //告知服务器移除共享
    const message = {
      messageType: 'stopShare',
      userId: userInfo.id,
      meetingCode: meetingCode,
      app: 'live-' + getMyUuid(),
      stream: 'livestream-' + getMyUuid(),
    };
    sendMessage(message);
  };

  const closeWindow = async () => {
    localRtcPeerConnection?.close();
    localShareRtcPeerConnection?.close();
    //告知服务器移除共享
    const message = {
      messageType:
        getStreamType() === 'pushStream' ? 'pushRemove' : 'pullRemove',
      userId: userInfo.id,
      removeType: 'endMeeting',
      meetingCode: meetingCode,
    };
    sendMessage(message);
    setTimeout(() => {
      window.tm?.ipcRenderer.send('toMeetingClose');
    }, 100);
  };

  const removePull = async (data: any) => {
    const newAttendedList = getAttendedList();
    let removeIndex: number;
    if (newAttendedList!.length > 0) {
      const updatedList = newAttendedList!.filter((item, index) => {
        if (item.userId.toString() === data.userId.toString()) {
          removeIndex = index;
        }
        return item.userId.toString() !== data.userId.toString();
      });
      setAttendedList(updatedList);
      rangeVideoThumbnailRef.current.refs =
        rangeVideoThumbnailRef.current.refs!.filter((item, index) => {
          if (index - 1 != removeIndex) {
            return item;
          }
        });
    }
  };

  //切换音视频
  const toggle = async (audioKey: string, videoKey: string, type: string) => {
    // 获取发送器列表
    const senders = getLocalRtcPeerConnection()!.getSenders();
    // 遍历发送器列表以获取音频和视频轨道信息
    senders.forEach((sender) => {
      if (sender.track) {
        if (sender.track.kind === 'video') {
          // 这是视频轨道，您可以访问其相关信息
          const videoTrack = sender.track;
          const videoSettings = videoTrack.getSettings();
          console.log('视频轨道信息:', videoSettings);
          if (type === 'audio') {
            videoKey = videoSettings.deviceId!;
          }
        } else if (sender.track.kind === 'audio') {
          // 这是音频轨道，您可以访问其相关信息
          const audioTrack = sender.track;
          const audioSettings = audioTrack.getSettings();
          console.log('音频轨道信息:', audioSettings);
          if (type === 'camera') {
            audioKey = audioSettings.deviceId!;
          }
        }
      }
    });
    // 停止当前正在使用的摄像头和麦克风流
    if (localStream) {
      localStream.getTracks().forEach((track) => track.stop());
    }
    // 获取新的摄像头和麦克风流
    const constraints = {
      video: {
        deviceId: { exact: videoKey },
        width: { ideal: 1920 },
        height: { ideal: 1080 },
      },
      audio: {
        deviceId: { exact: audioKey },
      }, // 启用音频
    };
    navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function (stream) {
        // 替换正在使用的流
        setLocalStream(stream);
        // 将新流添加到 peerConnection 中
        localRtcPeerConnection!.getSenders().forEach((sender) => {
          if (type === 'camera' && sender!.track!.kind === 'video') {
            sender.replaceTrack(stream.getVideoTracks()[0]);
          }
          if (type === 'audio' && sender!.track!.kind === 'audio') {
            sender.replaceTrack(stream.getAudioTracks()[0]);
          }
          localVideoRef.current!.srcObject = stream;
        });
      })
      .catch(function (error) {
        console.error('获取新摄像头和麦克风流时出错：', error);
      });
  };
  //控制音量开关
  const audioSwitch = async (audioFlag: boolean) => {
    // 获取发送器列表
    const senders = getLocalRtcPeerConnection()!.getSenders();
    // 遍历发送器列表以获取音频轨道
    for (const sender of senders) {
      if (audioFlag != null && sender.track && sender.track.kind === 'audio') {
        const audioTrack = sender.track;
        // 音频开关
        audioTrack.enabled = audioFlag;
        //告知服务器修改推流状态
        const message = {
          messageType: 'updateAudioStatus',
          userId: userInfo.id,
          app: 'live-' + myUuid,
          stream: 'livestream-' + myUuid,
          meetingCode: meetingCode,
          audioFlag: audioFlag,
        };
        await sendMessage(message);
      }
    }
  };
  //控制视频开关
  const videoSwitch = async (videoFlag: boolean) => {
    // 获取发送器列表
    const senders = getLocalRtcPeerConnection()!.getSenders();
    // 遍历发送器列表以获取视频轨道
    for (const sender of senders) {
      if (videoFlag != null && sender.track && sender.track.kind === 'video') {
        const videoTrack = sender.track;
        //视频开关
        videoTrack.enabled = !videoFlag;
        //告知服务器修改推流状态
        const message = {
          messageType: 'updateVideoStatus',
          userId: userInfo.id,
          app: 'live-' + myUuid,
          stream: 'livestream-' + myUuid,
          meetingCode: meetingCode,
          videoFlag: !videoFlag,
        };
        await sendMessage(message);
      }
    }
  };
  //共享屏幕列表
  const sharedScreenList = async () => {
    // 监听桌面信息
    const result = await window.tm!.ipcRenderer.invoke('desktop-sources', {});
    setDesktopSources(result);
  };
  //共享屏幕
  const sharedScreen = async () => {
    // 在重新共享屏幕之前清理之前的连接和流
    if (localShareRtcPeerConnection) {
      localShareRtcPeerConnection.close();
    }
    if (localShareStream) {
      // 停止所有轨道
      localShareStream.getTracks().forEach((track) => track.stop());
    }
    setMeetingReceivedMessage(undefined);
    const constraints = {
      video: {
        width: { ideal: 1920 },
        height: { ideal: 1080 },
      },
    };
    navigator.mediaDevices
      .getDisplayMedia(constraints)
      .then((screenStream) => {
        //获取音频流
        navigator.mediaDevices
          .getUserMedia({ audio: true })
          .then((audioStream) => {
            // 合并音频流和屏幕分享流
            const mergedStream = new MediaStream();
            screenStream
              .getTracks()
              .forEach((track) => mergedStream.addTrack(track));
            audioStream
              .getTracks()
              .forEach((track) => mergedStream.addTrack(track));
            setLocalShareStream(mergedStream);
            localVideoRef.current!.srcObject = mergedStream;
            // 创建RTC推流连接
            const shareScreenPeerConnection = new RTCPeerConnection();
            shareScreenPeerConnection.addTransceiver('audio', {
              direction: 'sendonly',
            });
            shareScreenPeerConnection.addTransceiver('video', {
              direction: 'sendonly',
            });
            // 添加本地流到连接
            mergedStream.getTracks().forEach((track) => {
              //设置固定分辨率，避免出现录频会变化分辨率
              const hint = 'detail';
              if ('contentHint' in track) {
                track.contentHint = hint;
                if (track.contentHint !== hint) {
                  console.error(`Invalid video track contentHint: "${hint}"`);
                }
              }
              shareScreenPeerConnection.addTrack(track);
            });
            // 创建一个Offer并设置本地描述
            shareScreenPeerConnection
              .createOffer()
              .then((offer) => {
                return shareScreenPeerConnection.setLocalDescription(
                  new RTCSessionDescription(offer),
                );
              })
              .then(async () => {
                // 发送本地描述给远程端
                const uuid = await getSelfGrowthId(peerServer);
                let url =
                  `${srsServer}/?app=live-` +
                  uuid.data +
                  `&stream=livestream-` +
                  uuid.data;
                if (getMeetingReceivedMessage() != undefined) {
                  url =
                    `${srsServer}/?app=` +
                    getMeetingReceivedMessage()!.app +
                    `&stream=` +
                    getMeetingReceivedMessage()!.stream;
                } else {
                  setMyShareUuid(uuid.data);
                }
                const result = await fetch(url, {
                  method: 'POST',
                  // mode: 'cors',
                  cache: 'no-cache',
                  // credentials: 'include',
                  redirect: 'follow',
                  referrerPolicy: 'no-referrer',
                  headers: {
                    'Content-Type': 'application/sdp',
                  },
                  body: shareScreenPeerConnection.localDescription?.sdp,
                });
                const remoteSdp = await result.text();
                await shareScreenPeerConnection.setRemoteDescription(
                  new RTCSessionDescription({ type: 'answer', sdp: remoteSdp }),
                );
                setLocalShareRtcPeerConnection(shareScreenPeerConnection);
                if (!getShareFlag()) {
                  //告知服务器开启共享
                  const message = {
                    messageType: 'share',
                    userId: userInfo.id,
                    app: 'live-' + uuid.data,
                    stream: 'livestream-' + uuid.data,
                    meetingCode: meetingCode,
                  };
                  await sendMessage(message);
                  //开启共享屏幕窗口
                  window.tm!.ipcRenderer.send(
                    'open-shareOperationBar',
                    JSON.stringify(volumeList),
                    JSON.stringify(cameraList),
                    volumeFlag,
                    cameraFlag,
                    meetingCode,
                  );
                }
              })
              .catch((error) =>
                console.error('发送本地描述给远程端异常：', error),
              );
          })
          .catch((error) => {
            console.error('获取音频流失败: ' + error);
          });
      })
      .catch((error) => {
        console.error('获取屏幕共享流失败: ' + error);
      });
    return true;
  };

  const volumeClick = async () => {
    if (getVolumeFlag()) {
      setVolumeFlag(false);
      await audioSwitch(false);
    } else {
      setVolumeFlag(true);
      await audioSwitch(true);
    }
  };
  const cameraClick = async () => {
    if (getCameraFlag()) {
      setCameraFlag(false);
      await videoSwitch(false);
    } else {
      setCameraFlag(true);
      await videoSwitch(true);
    }
  };

  const getUserList = async () => {
    //告知服务器获取在线用户
    const message = {
      messageType: 'getInviteUser',
      userId: userInfo.id,
      meetingCode: meetingCode,
    };
    await sendMessage(message);
  };
  const initInviteUser = (data: any) => {
    const userList: RecordType[] = [];
    data.inviteUserList.map(
      (inviteUser: { userId: string; userName: string; avatar: string }) => {
        const user: RecordType = {
          key: inviteUser.userId,
          title: inviteUser.userName,
          imageUrl:
            inviteUser.avatar === '' ? '/img/user.png' : inviteUser.avatar,
        };
        userList.push(user);
      },
    );
    setInviteUserListData(userList);
  };

  const pullReceive = async (data: any) => {
    //有新的参会人员加入，拉取对应流
    const attend: {
      userId: string;
      userName: string;
      avatar: string;
      messageType: string;
      app: string;
      stream: string;
      pullFlag: boolean;
      pushFlag: boolean;
      videoFlag: boolean;
      audioFlag: boolean;
    } = {
      userId: data.userId,
      userName: data.userName,
      avatar: userInfo.avatar,
      messageType: '',
      app: data.app,
      stream: data.stream,
      pullFlag: true,
      pushFlag: false,
      videoFlag: true,
      audioFlag: true,
    };
    if (attendedList != undefined) {
      // @ts-ignore
      setAttendedList([...attendedList!, attend!]);
    }
    const videoStream = new MediaStream();
    const peer = new RTCPeerConnection();
    peer.addTransceiver('audio', { direction: 'recvonly' });
    peer.addTransceiver('video', { direction: 'recvonly' });
    //监听连接状态,监听状态必须在设置描述之前
    peer.onconnectionstatechange = () => {
      if (peer.connectionState === 'connected') {
        console.log('连接上来了');
      } else if (
        peer.connectionState === 'disconnected' ||
        peer.connectionState === 'failed'
      ) {
        //replay('WebRTC断开，重置播放器');
      }
    };
    peer.ontrack = (e) => {
      videoStream.addTrack(e.track);
    };
    const rtcSdp = await peer.createOffer();
    await peer.setLocalDescription(rtcSdp);
    let url = `${srsServer}-play/?app=` + data!.app + `&stream=` + data!.stream;
    const result = await fetch(url, {
      method: 'POST',
      // mode: 'cors',
      cache: 'no-cache',
      // credentials: 'include',
      redirect: 'follow',
      referrerPolicy: 'no-referrer',
      headers: {
        'Content-Type': 'application/sdp',
      },
      body: rtcSdp.sdp,
    });
    const remoteSdp = await result.text();
    await peer.setRemoteDescription(
      new RTCSessionDescription({ type: 'answer', sdp: remoteSdp }),
    );
    if (data.pushFlag) {
      rangeVideoRef.current!.srcObject = videoStream;
    }
    if (data.userId != userInfo.id.toString()) {
      rangeVideoThumbnailRef.current!.refs.forEach((videoRef, index) => {
        if (videoRef && getAttendedList().length - 1 === index) {
          videoRef.srcObject = videoStream;
        }
      });
    }
  };
  const handleChange = (
    nextTargetKeys: string[],
    direction: TransferDirection,
    moveKeys: string[],
  ) => {
    setTargetKeys(nextTargetKeys);
  };
  const handleCancel = () => {
    setViewFlag(false);
  };
  const toggleCollapse = () => {
    setIsCollapsed(!isCollapsed);
    setDivHeight(!isCollapsed ? '25%' : '30px');
    setVideoHeight(!isCollapsed ? '75%' : 'calc(100% - 30px)');
    setDivWidth(!isCollapsed ? '25%' : '0');
    setVideoWidth(!isCollapsed ? '75%' : '100%');
  };
  const toggleFullScreen = () => {
    let videoElement;
    if (getStreamType() === 'pushStream') {
      videoElement = localVideoRef.current;
    } else {
      videoElement = rangeVideoRef.current;
    }
    if (!document.fullscreenElement) {
      videoElement!
        .requestFullscreen()
        .then(() => {
          videoElement!.controls = false;
          videoElement!.setAttribute('controls', 'false'); // 兼容性设置
        })
        .catch((err) => {
          console.error(`全屏出现异常: ${err.message}`);
        });
    } else {
      document.exitFullscreen();
    }
  };
  const chatShow = async () => {
    await window.tm!.ipcRenderer.invoke('chat-show', true);
    setChatFlag(true);
  };

  //共享录制
  const meetingRecord = (isRecordFlag: boolean) => {
    console.log(
      'meeting=====recordFlag:' +
        recordFlag +
        '==========getStreamType:' +
        getStreamType(),
    );
    if (isRecordFlag && getStreamType() === 'pullStream') {
      message.error('主持人正在录制屏幕!');
      return true;
    }
    if (!isRecordFlag && getStreamType() === 'pullStream') {
      //向主持人发送录制请求
      message.info('向主持人发送录制请求!');
      const messageInfo = {
        messageType: 'compereMeetingShareRecord',
        userId: userInfo.id,
        userName: userInfo.userName,
        meetingCode: meetingCode,
      };
      sendMessage(messageInfo);
      return true;
    }
    console.log('点击', isRecordFlag ? '录制' : '结束录制');
    const messageInfo = {
      messageType: 'meetingShareRecord',
      userId: userInfo.id,
      meetingCode: meetingCode,
      isRecordFlag: isRecordFlag,
    };
    sendMessage(messageInfo);
  };

  //离开会议
  const recordMoticeToLeaveMeeting = () => {
    localRtcPeerConnection?.close();
    localShareRtcPeerConnection?.close();
    setCloseType('leaveMeeting');
    //告知服务器移除共享
    const message = {
      messageType:
        getStreamType() === 'pushStream' ? 'pushRemove' : 'pullRemove',
      userId: userInfo.id,
      removeType: 'leaveMeeting',
      meetingCode: meetingCode,
    };
    sendMessage(message);
    setTimeout(() => {
      window.tm?.ipcRenderer.send('toMeetingClose');
    }, 100);
  };

  return (
    <div className={styles.meetContent}>
      <div className={styles.meetLeft}>
        <div className={styles.meetTitle}>
          <div className={styles.imgIcon}>
            <img src="/img/图标@2x.png" />
          </div>
          <div className={styles.title}>视频会议-可视化综合培训系统</div>
          <div className={styles.win_control}>
            <div
              className={styles.SplitScreen6}
              onClick={(e: any) => {
                if (viewFlag) {
                  setViewFlag(false);
                } else {
                  const buttonRect = e.target.getBoundingClientRect();
                  setModalPosition({
                    top: 30,
                    left: buttonRect.left,
                  });
                  setViewFlag(true);
                }
              }}
            >
              <SplitScreen6></SplitScreen6>视图
            </div>
            <Button
              type="text"
              icon={<MinusOutlined />}
              onClick={() => {
                setViewFlag(false);
                window.tm?.ipcRenderer.send('toMeetingMin');
              }}
            />
            <Button
              type="text"
              icon={<BorderOutlined />}
              onClick={() => {
                setViewFlag(false);
                window.tm?.ipcRenderer.send('toMeetingMax');
              }}
            />
            <Button
              danger
              type="text"
              icon={<CloseOutlined />}
              onClick={(e: any) => {
                const buttonRect = e.target.getBoundingClientRect();
                setCloseModalPosition({
                  top: 0,
                  left: buttonRect.left,
                });
                setCloseFlag(true);
              }}
            />
            <Modal
              open={closeFlag}
              onOk={() => {
                setCloseFlag(true);
              }}
              onCancel={() => {
                setCloseFlag(false);
              }}
              mask={true}
              footer={null}
              width={140}
              closable={false}
              maskClosable={true}
              style={{
                position: 'absolute',
                top: closeModalPosition.top + 40 + 'px',
                left: closeModalPosition.left - 118 + 'px',
              }}
              styles={{
                content: {
                  paddingLeft: 0,
                  paddingRight: 0,
                  paddingTop: 3,
                  paddingBottom: 2,
                },
              }}
            >
              <div className={styles.closeContent}>
                {getStreamType() === 'pushStream' && (
                  <div
                    className={styles.endMeeting}
                    onClick={() => {
                      localRtcPeerConnection?.close();
                      localShareRtcPeerConnection?.close();
                      setCloseType('endMeeting');
                      //告知服务器移除共享
                      const message = {
                        messageType:
                          getStreamType() === 'pushStream'
                            ? 'pushRemove'
                            : 'pullRemove',
                        userId: userInfo.id,
                        removeType: 'endMeeting',
                        meetingCode: meetingCode,
                      };
                      sendMessage(message);
                      setTimeout(() => {
                        window.tm?.ipcRenderer.send('toMeetingClose');
                      }, 100);
                    }}
                  >
                    结束会议
                  </div>
                )}
                <div
                  className={
                    getStreamType() === 'pushStream'
                      ? styles.leaveMeetingPush
                      : styles.leaveMeetingPull
                  }
                  onClick={() => {
                    localRtcPeerConnection?.close();
                    localShareRtcPeerConnection?.close();
                    setCloseType('leaveMeeting');
                    //告知服务器移除共享
                    const message = {
                      messageType:
                        getStreamType() === 'pushStream'
                          ? 'pushRemove'
                          : 'pullRemove',
                      userId: userInfo.id,
                      removeType: 'leaveMeeting',
                      meetingCode: meetingCode,
                    };
                    sendMessage(message);
                    setTimeout(() => {
                      window.tm?.ipcRenderer.send('toMeetingClose');
                    }, 100);
                  }}
                >
                  离开会议
                </div>
                <div
                  className={styles.cancelMeeting}
                  onClick={() => {
                    setCloseFlag(false);
                  }}
                >
                  取消
                </div>
              </div>
            </Modal>
          </div>
        </div>
        <div className={styles.meetingContent}>
          <div className={styles.meetingLeft}>
            {layoutCheck === 1 && (
              <div className={styles.layoutOneVideoContainer}>
                {getStreamType() === 'pushStream' && (
                  <>
                    <div
                      className={styles.layoutOneTop}
                      style={{ height: divHeight }}
                    >
                      <div
                        className={styles.layoutOnePanelContent}
                        hidden={!isCollapsed}
                      >
                        {attendedList?.map((attend, index) => {
                          if (attend.videoFlag && attend.audioFlag) {
                            //视频打开，音频打开
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <video
                                    ref={(ref) =>
                                      (rangeVideoThumbnailRef.current!.refs[
                                        index
                                      ] = ref as HTMLVideoElement)
                                    }
                                    style={{ height: '100%' }}
                                    autoPlay
                                    muted={attend.userId === userInfo.id}
                                    controls={false}
                                  />
                                </div>
                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (attend.videoFlag && !attend.audioFlag) {
                            //视频打开，音频关闭
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <video
                                    ref={(ref) =>
                                      (rangeVideoThumbnailRef.current!.refs[
                                        index
                                      ] = ref as HTMLVideoElement)
                                    }
                                    style={{ height: '100%' }}
                                    autoPlay
                                    controls={false}
                                  />
                                </div>
                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && attend.audioFlag) {
                            //视频关闭，音频打开
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>
                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && !attend.audioFlag) {
                            //视频关闭，音频关闭
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>

                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          }
                        })}
                      </div>
                      <button
                        className={styles.buttonPanel}
                        onClick={toggleCollapse}
                      >
                        {isCollapsed && (
                          <img
                            src={'/img/meeting/topArrow.png'}
                            className={styles.buttonImage}
                          />
                        )}
                        {!isCollapsed && (
                          <img
                            src={'/img/meeting/downArrow.png'}
                            className={styles.buttonImage}
                          />
                        )}
                      </button>
                    </div>
                    <div
                      className={styles.layoutOneDown}
                      style={{ height: VideoHeight }}
                    >
                      <video
                        className={styles.video}
                        ref={localVideoRef}
                        muted
                        autoPlay
                        controls={false}
                      />
                    </div>
                  </>
                )}
                {getStreamType() === 'pullStream' && (
                  <>
                    <div
                      className={styles.layoutOneTop}
                      style={{ height: divHeight }}
                    >
                      <div
                        className={styles.layoutOnePanelContent}
                        hidden={!isCollapsed}
                      >
                        {attendedList?.map((attend, index) => {
                          if (attend.videoFlag && attend.audioFlag) {
                            //视频打开，音频打开
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <video
                                    ref={(ref) =>
                                      (rangeVideoThumbnailRef.current!.refs[
                                        index
                                      ] = ref as HTMLVideoElement)
                                    }
                                    style={{ height: '100%' }}
                                    autoPlay
                                    muted={attend.userId === userInfo.id}
                                    controls={false}
                                  />
                                </div>
                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (attend.videoFlag && !attend.audioFlag) {
                            //视频打开，音频关闭
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <video
                                    ref={(ref) =>
                                      (rangeVideoThumbnailRef.current.refs[
                                        index
                                      ] = ref as HTMLVideoElement)
                                    }
                                    style={{ height: '100%' }}
                                    autoPlay
                                    controls={false}
                                  />
                                </div>
                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && attend.audioFlag) {
                            //视频关闭，音频打开
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>
                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && !attend.audioFlag) {
                            //视频关闭，音频关闭
                            return (
                              <div className={styles.layoutOnePanelHeader}>
                                <div className={styles.layoutOnePaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>
                                <div
                                  className={styles.layoutOnePaneUserNameDiv}
                                >
                                  <div className={styles.layoutOnePaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          }
                        })}
                      </div>
                      <button
                        className={styles.buttonPanel}
                        onClick={toggleCollapse}
                      >
                        {isCollapsed && (
                          <img
                            src={'/img/meeting/topArrow.png'}
                            className={styles.buttonImage}
                          />
                        )}
                        {!isCollapsed && (
                          <img
                            src={'/img/meeting/downArrow.png'}
                            className={styles.buttonImage}
                          />
                        )}
                      </button>
                    </div>
                    <div
                      className={styles.layoutOneDown}
                      style={{ height: VideoHeight }}
                    >
                      <video
                        className={styles.video}
                        ref={rangeVideoRef}
                        autoPlay
                        controls={false}
                      />
                    </div>
                  </>
                )}
              </div>
            )}
            {layoutCheck === 2 && (
              <div className={styles.layoutTwoVideoContainer}>
                {getStreamType() === 'pushStream' && (
                  <>
                    <div
                      className={styles.layoutTwoLeft}
                      style={{ width: videoWidth }}
                    >
                      <video
                        className={styles.videoTwo}
                        ref={localVideoRef}
                        muted
                        autoPlay
                        controls={false}
                      />
                      <button
                        className={styles.buttonTwoPanel}
                        onClick={toggleCollapse}
                      >
                        <img
                          src={'/img/meeting/rightArrow.png'}
                          className={styles.buttonTwoImage}
                        />
                      </button>
                    </div>
                    <div
                      className={styles.layoutTwoRight}
                      style={{ width: divWidth }}
                    >
                      <div
                        className={styles.layoutTwoPanelContent}
                        hidden={!isCollapsed}
                      >
                        {attendedList?.map((attend, index) => {
                          if (attend.videoFlag && attend.audioFlag) {
                            //视频打开，音频打开
                            return (
                              <div className={styles.layoutTwoPanelHeader}>
                                <div className={styles.layoutTwoPaneAvatar}>
                                  <video
                                    ref={(ref) =>
                                      (rangeVideoThumbnailRef.current!.refs[
                                        index
                                      ] = ref as HTMLVideoElement)
                                    }
                                    style={{ height: '100%' }}
                                    autoPlay
                                    muted={attend.userId === userInfo.id}
                                    controls={false}
                                  />
                                </div>
                                <div
                                  className={styles.layoutTwoPaneUserNameDiv}
                                >
                                  <div className={styles.layoutTwoPaneUserName}>
                                    {volumeFlag && <AudioOutlined />}
                                    {!volumeFlag && <AudioMutedOutlined />}
                                    {userInfo.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (attend.videoFlag && !attend.audioFlag) {
                            //视频打开，音频关闭
                            return (
                              <div className={styles.layoutTwoPanelHeader}>
                                <div className={styles.layoutTwoPaneAvatar}>
                                  <video
                                    ref={(ref) =>
                                      (rangeVideoThumbnailRef.current!.refs[
                                        index
                                      ] = ref as HTMLVideoElement)
                                    }
                                    style={{ height: '100%' }}
                                    autoPlay
                                    controls={false}
                                  />
                                </div>
                                <div
                                  className={styles.layoutTwoPaneUserNameDiv}
                                >
                                  <div className={styles.layoutTwoPaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && attend.audioFlag) {
                            //视频关闭，音频打开
                            return (
                              <div className={styles.layoutTwoPanelHeader}>
                                <div className={styles.layoutTwoPaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>
                                <div
                                  className={styles.layoutTwoPaneUserNameDiv}
                                >
                                  <div className={styles.layoutTwoPaneUserName}>
                                    <AudioOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && !attend.audioFlag) {
                            //视频关闭，音频关闭
                            return (
                              <div className={styles.layoutTwoPanelHeader}>
                                <div className={styles.layoutTwoPaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>

                                <div
                                  className={styles.layoutTwoPaneUserNameDiv}
                                >
                                  <div className={styles.layoutTwoPaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          }
                        })}
                      </div>
                    </div>
                  </>
                )}
                {getStreamType() === 'pullStream' && (
                  <>
                    <div
                      className={styles.layoutTwoLeft}
                      style={{ width: videoWidth }}
                    >
                      <video
                        className={styles.videoTwo}
                        ref={rangeVideoRef}
                        autoPlay
                        controls={false}
                      />
                      <button
                        className={styles.buttonTwoPanel}
                        onClick={toggleCollapse}
                      >
                        <img
                          src={'/img/meeting/rightArrow.png'}
                          className={styles.buttonTwoImage}
                        />
                      </button>
                    </div>
                    <div
                      className={styles.layoutTwoRight}
                      style={{ width: divWidth }}
                    >
                      <div
                        className={styles.layoutTwoPanelContent}
                        hidden={!isCollapsed}
                      >
                        {attendedList?.map((attend, index) => {
                          if (attend.videoFlag && attend.audioFlag) {
                            //视频打开，音频打开
                            if (attend.userId === userInfo.id) {
                              return (
                                <div className={styles.layoutTwoPanelHeader}>
                                  <div className={styles.layoutTwoPaneAvatar}>
                                    <video
                                      ref={(ref) =>
                                        (rangeVideoThumbnailRef.current!.refs[
                                          index
                                        ] = ref as HTMLVideoElement)
                                      }
                                      style={{ height: '100%' }}
                                      autoPlay
                                      muted
                                      controls={false}
                                    />
                                  </div>
                                  <div
                                    className={styles.layoutTwoPaneUserNameDiv}
                                  >
                                    <div
                                      className={styles.layoutTwoPaneUserName}
                                    >
                                      {volumeFlag && <AudioOutlined />}
                                      {!volumeFlag && <AudioMutedOutlined />}
                                      {userInfo.userName}
                                    </div>
                                  </div>
                                </div>
                              );
                            } else {
                              return (
                                <div className={styles.layoutTwoPanelHeader}>
                                  <div className={styles.layoutTwoPaneAvatar}>
                                    <video
                                      ref={(ref) =>
                                        (rangeVideoThumbnailRef.current!.refs[
                                          index
                                        ] = ref as HTMLVideoElement)
                                      }
                                      style={{ height: '100%' }}
                                      autoPlay
                                      controls={false}
                                    />
                                  </div>
                                  <div
                                    className={styles.layoutTwoPaneUserNameDiv}
                                  >
                                    <div
                                      className={styles.layoutTwoPaneUserName}
                                    >
                                      <AudioOutlined />
                                      {attend.userName}
                                    </div>
                                  </div>
                                </div>
                              );
                            }
                          } else if (attend.videoFlag && !attend.audioFlag) {
                            //视频打开，音频关闭
                            return (
                              <div className={styles.layoutTwoPanelHeader}>
                                <div className={styles.layoutTwoPaneAvatar}>
                                  <video
                                    ref={(ref) =>
                                      (rangeVideoThumbnailRef.current.refs[
                                        index
                                      ] = ref as HTMLVideoElement)
                                    }
                                    style={{ height: '100%' }}
                                    autoPlay
                                    controls={false}
                                  />
                                </div>
                                <div
                                  className={styles.layoutTwoPaneUserNameDiv}
                                >
                                  <div className={styles.layoutTwoPaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && attend.audioFlag) {
                            //视频关闭，音频打开
                            return (
                              <div className={styles.layoutTwoPanelHeader}>
                                <div className={styles.layoutTwoPaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>
                                <div
                                  className={styles.layoutTwoPaneUserNameDiv}
                                >
                                  <div className={styles.layoutTwoPaneUserName}>
                                    <AudioOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          } else if (!attend.videoFlag && !attend.audioFlag) {
                            //视频关闭，音频关闭
                            return (
                              <div className={styles.layoutTwoPanelHeader}>
                                <div className={styles.layoutTwoPaneAvatar}>
                                  <img
                                    src={attend.avatar}
                                    style={{
                                      width: 30,
                                      height: 30,
                                      borderRadius: '50%',
                                      objectFit: 'cover',
                                    }}
                                  />
                                </div>
                                <div
                                  className={styles.layoutTwoPaneUserNameDiv}
                                >
                                  <div className={styles.layoutTwoPaneUserName}>
                                    <AudioMutedOutlined />
                                    {attend.userName}
                                  </div>
                                </div>
                              </div>
                            );
                          }
                        })}
                      </div>
                    </div>
                  </>
                )}
              </div>
            )}
            {layoutCheck === 3 && (
              <div className={styles.layoutThreeVideoContainer}>
                {getStreamType() === 'pushStream' && (
                  <div className={styles.layoutThreeContent}>
                    {attendedList?.map((attend, index) => {
                      if (attend.videoFlag && attend.audioFlag) {
                        //视频打开，音频打开
                        if (attend.userId === userInfo.id) {
                          return (
                            <div className={styles.layoutThreePanelHeader}>
                              <div className={styles.layoutThreePaneAvatar}>
                                <video
                                  ref={localVideoRef}
                                  style={{ height: '100%' }}
                                  autoPlay
                                  muted
                                  controls={false}
                                />
                              </div>
                              <div
                                className={styles.layoutThreePaneUserNameDiv}
                              >
                                <div className={styles.layoutTwoPaneUserName}>
                                  {volumeFlag && <AudioOutlined />}
                                  {!volumeFlag && <AudioMutedOutlined />}
                                  {userInfo.userName}
                                </div>
                              </div>
                            </div>
                          );
                        } else {
                          return (
                            <div className={styles.layoutThreePanelHeader}>
                              <div className={styles.layoutThreePaneAvatar}>
                                <video
                                  ref={(ref) =>
                                    (rangeVideoThumbnailRef.current!.refs[
                                      index
                                    ] = ref as HTMLVideoElement)
                                  }
                                  style={{ height: '100%' }}
                                  autoPlay
                                  controls={false}
                                />
                              </div>
                              <div
                                className={styles.layoutThreePaneUserNameDiv}
                              >
                                <div className={styles.layoutThreePaneUserName}>
                                  <AudioOutlined />
                                  {attend.userName}
                                </div>
                              </div>
                            </div>
                          );
                        }
                      } else if (attend.videoFlag && !attend.audioFlag) {
                        //视频打开，音频关闭
                        return (
                          <div className={styles.layoutThreePanelHeader}>
                            <div className={styles.layoutThreePaneAvatar}>
                              <video
                                ref={(ref) =>
                                  (rangeVideoThumbnailRef.current.refs[index] =
                                    ref as HTMLVideoElement)
                                }
                                style={{ height: '100%' }}
                                autoPlay
                                controls={false}
                              />
                            </div>
                            <div className={styles.layoutThreePaneUserNameDiv}>
                              <div className={styles.layoutThreePaneUserName}>
                                <AudioMutedOutlined />
                                {attend.userName}
                              </div>
                            </div>
                          </div>
                        );
                      } else if (!attend.videoFlag && attend.audioFlag) {
                        //视频关闭，音频打开
                        return (
                          <div className={styles.layoutThreePanelHeader}>
                            <div className={styles.layoutThreePaneAvatar}>
                              <img
                                src={attend.avatar}
                                style={{
                                  width: 30,
                                  height: 30,
                                  borderRadius: '50%',
                                  objectFit: 'cover',
                                }}
                              />
                            </div>
                            <div className={styles.layoutThreePaneUserNameDiv}>
                              <div className={styles.layoutThreePaneUserName}>
                                <AudioOutlined />
                                {attend.userName}
                              </div>
                            </div>
                          </div>
                        );
                      } else if (!attend.videoFlag && !attend.audioFlag) {
                        //视频关闭，音频关闭
                        return (
                          <div className={styles.layoutThreePanelHeader}>
                            <div className={styles.layoutThreePaneAvatar}>
                              <img
                                src={attend.avatar}
                                style={{
                                  width: 30,
                                  height: 30,
                                  borderRadius: '50%',
                                  objectFit: 'cover',
                                }}
                              />
                            </div>
                            <div className={styles.layoutThreePaneUserNameDiv}>
                              <div className={styles.layoutThreePaneUserName}>
                                <AudioMutedOutlined />
                                {attend.userName}
                              </div>
                            </div>
                          </div>
                        );
                      }
                    })}
                  </div>
                )}
                {getStreamType() === 'pullStream' && (
                  <div className={styles.layoutThreeContent}>
                    {attendedList?.map((attend, index) => {
                      if (attend.videoFlag && attend.audioFlag) {
                        //视频打开，音频打开
                        if (attend.userId === userInfo.id) {
                          return (
                            <div className={styles.layoutThreePanelHeader}>
                              <div className={styles.layoutThreePaneAvatar}>
                                <video
                                  ref={localVideoRef}
                                  style={{ height: '100%' }}
                                  autoPlay
                                  muted
                                  controls={false}
                                />
                              </div>
                              <div
                                className={styles.layoutThreePaneUserNameDiv}
                              >
                                <div className={styles.layoutTwoPaneUserName}>
                                  {volumeFlag && <AudioOutlined />}
                                  {!volumeFlag && <AudioMutedOutlined />}
                                  {userInfo.userName}
                                </div>
                              </div>
                            </div>
                          );
                        } else {
                          return (
                            <div className={styles.layoutThreePanelHeader}>
                              <div className={styles.layoutThreePaneAvatar}>
                                <video
                                  ref={(ref) =>
                                    (rangeVideoThumbnailRef.current!.refs[
                                      index
                                    ] = ref as HTMLVideoElement)
                                  }
                                  style={{ height: '100%' }}
                                  autoPlay
                                  controls={false}
                                />
                              </div>
                              <div
                                className={styles.layoutThreePaneUserNameDiv}
                              >
                                <div className={styles.layoutThreePaneUserName}>
                                  <AudioOutlined />
                                  {attend.userName}
                                </div>
                              </div>
                            </div>
                          );
                        }
                      } else if (attend.videoFlag && !attend.audioFlag) {
                        //视频打开，音频关闭
                        return (
                          <div className={styles.layoutThreePanelHeader}>
                            <div className={styles.layoutThreePaneAvatar}>
                              <video
                                ref={(ref) =>
                                  (rangeVideoThumbnailRef.current.refs[index] =
                                    ref as HTMLVideoElement)
                                }
                                style={{ height: '100%' }}
                                autoPlay
                                controls={false}
                              />
                            </div>
                            <div className={styles.layoutThreePaneUserNameDiv}>
                              <div className={styles.layoutThreePaneUserName}>
                                <AudioMutedOutlined />
                                {attend.userName}
                              </div>
                            </div>
                          </div>
                        );
                      } else if (!attend.videoFlag && attend.audioFlag) {
                        //视频关闭，音频打开
                        return (
                          <div className={styles.layoutThreePanelHeader}>
                            <div className={styles.layoutThreePaneAvatar}>
                              <img
                                src={attend.avatar}
                                style={{
                                  width: 30,
                                  height: 30,
                                  borderRadius: '50%',
                                  objectFit: 'cover',
                                }}
                              />
                            </div>
                            <div className={styles.layoutThreePaneUserNameDiv}>
                              <div className={styles.layoutThreePaneUserName}>
                                <AudioOutlined />
                                {attend.userName}
                              </div>
                            </div>
                          </div>
                        );
                      } else if (!attend.videoFlag && !attend.audioFlag) {
                        //视频关闭，音频关闭
                        return (
                          <div className={styles.layoutThreePanelHeader}>
                            <div className={styles.layoutThreePaneAvatar}>
                              <img
                                src={attend.avatar}
                                style={{
                                  width: 30,
                                  height: 30,
                                  borderRadius: '50%',
                                  objectFit: 'cover',
                                }}
                              />
                            </div>
                            <div className={styles.layoutThreePaneUserNameDiv}>
                              <div className={styles.layoutThreePaneUserName}>
                                <AudioMutedOutlined />
                                {attend.userName}
                              </div>
                            </div>
                          </div>
                        );
                      }
                    })}
                  </div>
                )}
              </div>
            )}
            <Space wrap size={100} className={styles.space}>
              <Space wrap>
                <Dropdown.Button
                  size={'large'}
                  icon={<DownOutlined />}
                  className={styles.audioButton}
                  menu={{
                    items: volumeList,
                    onClick: (item) => {
                      toggle(item.key, '', 'audio');
                    },
                  }}
                  placement={'topLeft'}
                  onClick={() => {
                    window.tm!.ipcRenderer.send(
                      'set-volumeClick-events',
                      !getVolumeFlag(),
                    );
                    volumeClick();
                  }}
                >
                  {volumeFlag && <AudioOutlined />}
                  {volumeFlag && '静音'}
                  {!volumeFlag && <AudioMutedOutlined />}
                  {!volumeFlag && '解除静音'}
                </Dropdown.Button>
                <Dropdown.Button
                  size={'large'}
                  icon={<DownOutlined />}
                  menu={{
                    items: cameraList,
                    onClick: (item) => {
                      toggle('', item.key, 'camera');
                    },
                  }}
                  placement={'topLeft'}
                  onClick={() => {
                    window.tm!.ipcRenderer.send(
                      'set-cameraClick-events',
                      !getCameraFlag(),
                    );
                    cameraClick();
                  }}
                >
                  {cameraFlag && <VideoCameraAddOutlined />}
                  {cameraFlag && '开摄像头'}
                  {!cameraFlag && <VideoCameraOutlined />}
                  {!cameraFlag && '关摄像头'}
                </Dropdown.Button>
              </Space>
              <Space wrap>
                <ModalForm<{}>
                  title="共享屏幕"
                  trigger={
                    <Button size={'large'} onClick={sharedScreenList}>
                      <ArrowUpOutlined />
                      共享
                    </Button>
                  }
                  form={form}
                  autoFocusFirstInput
                  modalProps={{
                    destroyOnClose: true,
                    onCancel: () => console.log('run'),
                  }}
                  submitTimeout={2000}
                  onFinish={async (values) => {
                    console.log(sourceSelected);
                    //共享屏幕
                    sharedScreen().then((reslut) => {
                      if (reslut) {
                        //将屏幕置于最前方
                        message.success('共享成功');
                      }
                    });
                    return true;
                  }}
                >
                  <CheckCard.Group
                    style={{ width: '100%', height: '100%' }}
                    size="small"
                    defaultValue={sourceSelected}
                    value={sourceSelected}
                  >
                    <Row>
                      {desktopSources!.map((desktopSource, index) => (
                        <Col span={8}>
                          <CheckCard
                            value={desktopSource.displayId}
                            onClick={async () => {
                              setSourceSelected(desktopSource.displayId);
                              //将选中的桌面信息回传给主进程
                              const newSelectedId = desktopSource.displayId;
                              await window.tm!.ipcRenderer.invoke(
                                'desktop-selectedSource',
                                newSelectedId,
                              );
                            }}
                            cover={
                              <div className={styles.checkCardStyle}>
                                <Space direction="vertical">
                                  <img
                                    alt={desktopSource.name}
                                    style={{ width: 150, height: 84 }}
                                    src={desktopSource.imageUrl}
                                  />
                                  <span
                                    className={styles.sourcesTitle}
                                    title={desktopSource.name}
                                  >
                                    {desktopSource.name}
                                  </span>
                                </Space>
                              </div>
                            }
                          />
                        </Col>
                      ))}
                    </Row>
                  </CheckCard.Group>
                </ModalForm>
                <Button
                  size={'large'}
                  id={'chatShowId'}
                  onClick={async () => {
                    if (chatFlag) {
                      await window.tm!.ipcRenderer.invoke('chat-show', false);
                      setChatFlag(false);
                    } else {
                      await window.tm!.ipcRenderer.invoke('chat-show', true);
                      setChatFlag(true);
                    }
                  }}
                >
                  {<MessageOutlined />}
                  {'聊天'}
                </Button>
                <ModalForm<{}>
                  title="邀请参会人员"
                  trigger={
                    <Button
                      size={'large'}
                      onClick={getUserList}
                      id={'inviteUserId'}
                    >
                      <UsergroupAddOutlined />
                      邀请
                    </Button>
                  }
                  form={inviteUserForm}
                  autoFocusFirstInput
                  modalProps={{
                    destroyOnClose: true,
                    onCancel: () => console.log('run'),
                  }}
                  submitTimeout={2000}
                  submitter={{
                    searchConfig: {
                      submitText: '呼叫',
                      resetText: '取消',
                    },
                  }}
                  onFinish={async (values) => {
                    if (targetKeys.length <= 0) {
                      message.error('请选择参会人员');
                      return false;
                    }
                    //告知服务器通知人员进入会议
                    const inviteUserMessage = {
                      messageType: 'inviteUser',
                      userIds: targetKeys,
                      userName: userInfo.userName,
                      avatar: userInfo.avatar,
                      meetingCode: meetingCode,
                      meetingName: meetingName,
                    };
                    await sendMessage(inviteUserMessage);
                    message.success('呼叫成功');
                    return true;
                  }}
                >
                  <Transfer
                    listStyle={{
                      width: '100%',
                      height: '400px',
                      borderRadius: '4px',
                    }}
                    dataSource={inviteUserListData}
                    targetKeys={targetKeys}
                    onChange={handleChange}
                    titles={['未参会人员', '已选择人员']}
                    render={(item) => (
                      <div className={styles.transferDiv}>
                        <img width={20} height={20} />
                        <span className={styles.transferSpan}>
                          {item.title}
                        </span>
                      </div>
                    )}
                  />
                </ModalForm>
                {getStreamType() === 'pushStream' && (
                  <ChairMeeting
                    meetingArgument={{ meetingCode, meetingName }}
                  />
                )}

                <Button
                  style={{ width: '120px' }}
                  icon={
                    recordFlag ? (
                      <Icon component={closeRecordIcon} />
                    ) : (
                      <Icon component={recordIcon} />
                    )
                  }
                  size={'large'}
                  onClick={() => {
                    if (getStreamType() === 'pushStream') {
                      window.tm!.ipcRenderer.send(
                        'set-recordClick-events',
                        !recordFlag,
                      );
                      meetingRecord(!recordFlag);
                      setRecordFlag(!recordFlag);
                    } else {
                      console.log('发送请求录制的状态-----', recordFlag);
                      meetingRecord(recordFlag);
                    }
                  }}
                >
                  {!recordFlag && getStreamType() === 'pushStream' && '录制'}
                  {getStreamType() !== 'pushStream' && '请求录制'}
                  {recordFlag && getStreamType() === 'pushStream' && '结束录制'}
                </Button>
                <Button
                  size={'large'}
                  icon={<ExpandOutlined />}
                  onClick={toggleFullScreen}
                >
                  全屏
                </Button>
              </Space>
            </Space>
          </div>
        </div>
      </div>
      {chatFlag && (
        <div className={styles.meetRight}>
          <div className={styles.meetTitle}>
            <div className={styles.title}>聊天</div>
            <div className={styles.win_control}>
              <Button
                danger
                type="text"
                icon={<CloseOutlined />}
                onClick={async () => {
                  await window.tm!.ipcRenderer.invoke('chat-show', false);
                  setChatFlag(false);
                }}
              />
            </div>
          </div>
          <div className={styles.meetingRight}>
            <Chat
              meetingArgument={meetingCode}
              chatMessageList={chatMessageList}
              setChatMessageList={setChatMessageList}
            />
          </div>
        </div>
      )}
      <Modal
        open={viewFlag}
        mask={false}
        footer={null}
        width={150}
        closable={false}
        onCancel={handleCancel}
        style={{
          position: 'absolute',
          top: modalPosition.top + 'px',
          left: modalPosition.left + 'px',
        }}
        styles={{
          content: {
            paddingLeft: 0,
            paddingRight: 0,
            paddingTop: 3,
            paddingBottom: 2,
            marginTop: 5,
          },
        }}
      >
        <div
          className={styles.viewContent}
          onClick={() => {
            setLayoutCheck(1);
            setViewFlag(false);
          }}
        >
          <div className={styles.rowLeftDiv}>
            {layoutCheck === 1 && (
              <img
                src={'/img/meeting/tick.png'}
                className={styles.rowImage}
              ></img>
            )}
          </div>
          <div className={styles.rowMidDiv}>标准</div>
          <div className={styles.rowRightDiv}>
            <SplitScreen6></SplitScreen6>
          </div>
        </div>
        <div
          className={styles.viewContent}
          onClick={() => {
            setLayoutCheck(2);
            setViewFlag(false);
          }}
        >
          <div className={styles.rowLeftDiv}>
            {layoutCheck === 2 && (
              <img
                src={'/img/meeting/tick.png'}
                className={styles.rowImage}
              ></img>
            )}
          </div>
          <div className={styles.rowMidDiv}>演讲者</div>
          <div className={styles.rowRightDiv}>
            <SplitScreen7></SplitScreen7>
          </div>
        </div>
        <div
          className={styles.viewContent}
          onClick={() => {
            setLayoutCheck(3);
            setViewFlag(false);
          }}
        >
          <div className={styles.rowLeftDiv}>
            {layoutCheck === 3 && (
              <img
                src={'/img/meeting/tick.png'}
                className={styles.rowImage}
              ></img>
            )}
          </div>
          <div className={styles.rowMidDiv}>宫格</div>
          <div className={styles.rowRightDiv}>
            <SplitScreen8></SplitScreen8>
          </div>
        </div>
      </Modal>
    </div>
  );
};
